<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单位换算</title>
    <meta name="description" content="清新易用的单位换算工具，覆盖多类常用与专业单位。" />
    <meta name="theme-color" content="#5b8cff" />
    <!-- Iconfont symbol sprite: default fallback. Can be overridden via Settings (localStorage). -->
    <script id="iconfont-fallback" src="https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800&display=swap" rel="stylesheet" />
    <style>
      :root {
        --bg: #f7f9ff;
        --card: #ffffff;
        --text: #334155;
        --muted: #6b7280;
        --brand: #6366f1; /* Indigo-500 */
        --brand-2: #22d3ee; /* Cyan-400 */
        --brand-gradient: linear-gradient(135deg, var(--brand), var(--brand-2));
        --page-gradient: linear-gradient(180deg, rgba(99,102,241,0.10), rgba(34,211,238,0.08));
        --accent: #fbbf24;
        --danger: #ef4444;
        --success: #22c55e;
        --shadow: 0 10px 25px rgba(93, 122, 255, 0.08);
        --radius: 16px;
      }

      * { box-sizing: border-box; }
      html { -webkit-text-size-adjust: 100%; }
      html, body { height: 100%; }
      body {
        margin: 0;
        font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
        color: var(--text);
        background:
          radial-gradient(1000px 700px at 90% -10%, rgba(99,102,241,0.10), transparent 60%),
          radial-gradient(800px 500px at -10% 10%, rgba(34,211,238,0.10), transparent 55%),
          var(--page-gradient),
          var(--bg);
      }

      .container {
        max-width: 920px;
        margin: 0 auto;
        padding: 16px 16px 120px;
      }

      /* Header */
      .app-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: inherit;
      }
      .brand-logo {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--brand-gradient);
        display: grid;
        place-items: center;
        color: white;
        box-shadow: var(--shadow);
      }
      .brand-title {
        font-weight: 800;
        letter-spacing: 0.2px;
        font-size: 20px;
      }
      .nav-actions { display: none; }
      .btn {
        appearance: none;
        border: 0;
        background: var(--card);
        color: var(--text);
        padding: 12px 16px;
        border-radius: 12px;
        box-shadow: var(--shadow);
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
        font-weight: 700;
        font-size: 16px;
        min-height: 44px;
      }
      .btn:active { transform: scale(0.98); }
      .btn.primary { background: var(--brand-gradient); color: #fff; }

      /* Hero (used on study page as banner) */
      .hero {
        margin-top: 18px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .hero-card {
        background: var(--card);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 22px;
        position: relative;
        overflow: hidden;
        min-height: 120px;
      }
      .hero-card .bubble { position: absolute; border-radius: 50%; filter: blur(1px); opacity: 0.6; }
      .bubble.b1 { width: 120px; height: 120px; right: -30px; top: -20px; background: #e0eaff; }
      .bubble.b2 { width: 70px; height: 70px; right: 30px; bottom: 10px; background: #d2f4ff; }
      .bubble.b3 { width: 50px; height: 50px; left: -15px; bottom: -10px; background: #fff2cc; }
      .hero-title { font-size: 22px; line-height: 1.2; margin: 2px 0 4px; font-weight: 800; }
      .hero-subtitle { color: var(--muted); margin: 0; font-size: 14px; }

      /* Study Widgets */
      .widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .widget { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 14px; }
      .widget-title { margin: 0 0 8px; font-weight: 800; font-size: 16px; }
      .section-title { margin: 12px 0 8px; font-weight: 800; font-size: 18px; }
      .title-row { display: flex; align-items: center; gap: 8px; }
      .ico-mini { width: 18px; height: 18px; fill: currentColor; }
      .title-row .ico-mini { background: var(--brand-gradient); color: #ffffff; padding: 3px; border-radius: 6px; }
      .menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
      .menu-card { background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: var(--shadow); padding: 12px; display: grid; gap: 6px; cursor: pointer; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
      .menu-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); border-color: #e5e7eb; }
      .menu-title { font-weight: 800; }
      .menu-sub { color: var(--muted); font-size: 12px; }
      .badge-ico { display:inline-grid; place-items:center; width: 22px; height: 22px; border-radius: 8px; background: transparent; }
      .g-blue, .g-green, .g-orange, .g-purple, .g-red, .g-cyan { background: transparent; }
      .badge-ico svg { width: 14px; height: 14px; fill: #111827; }
      .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #4f46e5; font-weight: 800; font-size: 12px; }
      .periodic {
        display: grid;
        grid-template-columns: repeat(18, minmax(20px, 1fr));
        gap: 4px;
        font-size: 12px;
      }
      .elem { background: #f8fafc; border-radius: 8px; text-align: center; padding: 6px 0; }
      .elem.meta { background: transparent; }
      .times-table { width: 100%; border-collapse: separate; border-spacing: 6px; }
      .times-table td { background: #f8fafc; border-radius: 8px; padding: 6px 8px; text-align: center; font-weight: 700; }
      .categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
      .category-card { background: var(--card); border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: var(--shadow); padding: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.2s ease; }
      .category-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); }
      .icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: transparent; }
      .icon.blue, .icon.green, .icon.orange, .icon.purple, .icon.red, .icon.cyan, .icon.yellow, .icon.teal, .icon.indigo { background: transparent; }
      .icon svg { width: 22px; height: 22px; fill: #111827; stroke: none; }
      .category-name { font-weight: 800; }
      .category-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }

      /* Converter */
      .converter {
        margin-top: 22px;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 24px;
      }
      .card {
        background: var(--card);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 20px;
      }
      .card-title { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
      .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
      .select, .number {
        width: 100%;
        padding: 12px 14px;
        border-radius: 12px;
        border: 2px solid #e5e7eb;
        background: #f9fafb;
        font-weight: 700;
        outline: none;
        transition: border 0.2s ease, background 0.2s ease;
        font-size: 16px;
        min-height: 44px;
      }
      .select:focus, .number:focus { border-color: var(--brand); background: #fff; }
      .swap-btn { width: 44px; height: 44px; border-radius: 12px; border: none; background: #eef2ff; color: #4f46e5; display: grid; place-items: center; cursor: pointer; font-weight: 800; box-shadow: var(--shadow); }
      .result {
        margin-top: 14px;
        font-weight: 800;
        font-size: 22px;
        background: #f1f5f9;
        border-radius: 12px;
        padding: 12px 14px;
      }

      /* Tips and History */
      .list { display: grid; gap: 10px; }
      .list-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f8fafc; border-radius: 12px; }
      .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
      .muted { color: var(--muted); }

      /* Footer */
      .footer { text-align: center; color: var(--muted); margin-top: 28px; font-size: 13px; }

      /* Responsive */
      @media (max-width: 960px) {
        .hero, .converter { grid-template-columns: 1fr; }
        .categories { grid-template-columns: repeat(2, 1fr); }
        .widgets { grid-template-columns: 1fr; }
      }
      @media (max-width: 520px) {
        .categories { grid-template-columns: 1fr; }
        .row { grid-template-columns: 1fr; }
        .controls { grid-template-columns: 1fr; }
        .swap-btn { width: 100%; height: 42px; }
      }

      /* Tabs */
      .tabs { display: grid; gap: 20px; }
      .tab-panel[hidden] { display: none !important; }
      .tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(10px);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
        padding: 10px calc(20px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
      }
      .tabbar-inner { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
      .tab-btn {
        display: grid; place-items: center; gap: 6px;
        padding: 10px 8px; border-radius: 12px; border: 0;
        background: transparent; color: var(--muted); font-weight: 800; cursor: pointer;
        min-height: 52px; font-size: 12px;
      }
      .tab-btn .ico { width: 24px; height: 24px; fill: currentColor; stroke: none; }
      .tab-btn.active { color: #111827; }
    </style>
  </head>
  <body>
    <!-- Inline fallback symbols: used only if external iconfont symbols are missing -->
    <svg aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden">
      <defs>
        <symbol id="icon-home" viewBox="0 0 24 24"><path d="M3 10.5L12 3l9 7.5V21H4v-10.5Z"/></symbol>
        <symbol id="icon-grid" viewBox="0 0 24 24"><path d="M3 3h8v8H3V3Zm10 0h8v8h-8V3ZM3 13h8v8H3v-8Zm10 0h8v8h-8v-8Z"/></symbol>
        <symbol id="icon-user" viewBox="0 0 24 24"><path d="M12 13a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm8 8a8 8 0 0 0-16 0Z"/></symbol>
        <symbol id="icon-ruler" viewBox="0 0 24 24"><path d="M3 15l12-12 6 6-12 12H3v-6Zm4 2l2-2m2-2 2-2m2-2 2-2"/></symbol>
        <symbol id="icon-weight" viewBox="0 0 24 24"><path d="M6 9h12l-2 9H8L6 9Zm3-4h6l2 4H7l2-4Z"/></symbol>
        <symbol id="icon-time" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
        <symbol id="icon-temperature" viewBox="0 0 24 24"><path d="M10 5a2 2 0 1 1 4 0v9.5a4 4 0 1 1-4 0Z"/></symbol>
        <symbol id="icon-square" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="2"/></symbol>
        <symbol id="icon-bottle" viewBox="0 0 24 24"><path d="M10 3h4v3l2 2v11a4 4 0 0 1-8 0V8l2-2V3Z"/></symbol>
        <symbol id="icon-speed" viewBox="0 0 24 24"><path d="M4 16a8 8 0 1 1 16 0H4Zm8 0 4-6"/></symbol>
        <symbol id="icon-database" viewBox="0 0 24 24"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/></symbol>
        <symbol id="icon-bolt" viewBox="0 0 24 24"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z"/></symbol>
        <symbol id="icon-branch" viewBox="0 0 24 24"><path d="M12 6a3 3 0 1 1-3-3 3 3 0 0 1 3 3Zm9 12a3 3 0 1 1-3-3 3 3 0 0 1 3 3ZM9 6v6a6 6 0 0 0 6 6"/></symbol>
        <symbol id="icon-wave" viewBox="0 0 24 24"><path d="M3 12h4c2 0 2-4 4-4s2 4 4 4h6"/></symbol>
        <symbol id="icon-power" viewBox="0 0 24 24"><path d="M12 3v6"/><circle cx="12" cy="14" r="6"/></symbol>
        <symbol id="icon-battery" viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2"/><path d="M21 10v4"/></symbol>
        <symbol id="icon-move" viewBox="0 0 24 24"><path d="M12 2v20M2 12h20M12 2l4 4M12 2l-4 4M12 22l4-4M12 22l-4-4M2 12l4 4M2 12l4-4M22 12l-4 4M22 12l-4-4"/></symbol>
        <symbol id="icon-gauge" viewBox="0 0 24 24"><path d="M4 16a8 8 0 1 1 16 0H4Zm8 0 5-5"/></symbol>
        <symbol id="icon-star" viewBox="0 0 24 24"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L5.5 20l2-7L2 9h7l3-7Z"/></symbol>
        <symbol id="icon-menu" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"/></symbol>
        <symbol id="icon-apps" viewBox="0 0 24 24"><path d="M3 3h7v7H3V3Zm11 0h7v7h-7V3ZM3 14h7v7H3v-7Zm11 0h7v7h-7v-7Z"/></symbol>
        <symbol id="icon-table" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18M9 9v10M15 9v10"/></symbol>
        <symbol id="icon-cube" viewBox="0 0 24 24"><path d="M12 2 3 7l9 5 9-5-9-5Zm-9 7v8l9 5v-8l-9-5Zm18 0-9 5v8l9-5V9Z"/></symbol>
        <symbol id="icon-lab" viewBox="0 0 24 24"><path d="M9 3h6v2l-1 2v3l5 8a2 2 0 0 1-2 3H7a2 2 0 0 1-2-3l5-8V7l-1-2V3Z"/></symbol>
        <symbol id="icon-list" viewBox="0 0 24 24"><path d="M8 6h12M8 12h12M8 18h12M4 6h1M4 12h1M4 18h1"/></symbol>
        <symbol id="icon-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M16.5 16.5 21 21"/></symbol>
        <symbol id="icon-like" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9-8.5S5 3 9 6a5 5 0 0 1 6 0c4-3 8 1.5 6 6.5S12 21 12 21Z"/></symbol>
        <symbol id="icon-bulb" viewBox="0 0 24 24"><path d="M9 18h6M9 21h6"/><path d="M12 3a6 6 0 0 0-6 6c0 2.2 1.2 3.7 2.5 5S10 16 10 17h4c0-1 1.5-1.8 2.5-3s2.5-2.8 2.5-5a6 6 0 0 0-7-6Z"/></symbol>
        <symbol id="icon-settings" viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1-4 4 4 4 0 0 1 4-4Zm8 4 2-1-2-3-2 1a7.6 7.6 0 0 0-1.7-1l-.3-2h-4l-.3 2a7.6 7.6 0 0 0-1.7 1l-2-1-2 3 2 1a7.6 7.6 0 0 0 0 2l-2 1 2 3 2-1a7.6 7.6 0 0 0 1.7 1l.3 2h4l.3-2a7.6 7.6 0 0 0 1.7-1l2 1 2-3-2-1a7.6 7.6 0 0 0 0-2Z"/></symbol>
      </defs>
    </svg>
    <div class="container">

      <main class="tabs" id="tabsRoot">
        <!-- 学习（首页） -->
        <section class="tab-panel" id="tab-home" data-tab="home">
          <section class="hero">
            <div class="hero-card">
              <div class="bubble b1"></div>
              <div class="bubble b2"></div>
              <div class="bubble b3"></div>
              <h1 class="hero-title title-row"><svg class="ico-mini" aria-hidden="true"><use xlink:href="#icon-star"></use></svg>工具与资源</h1>
              <p class="hero-subtitle">常用换算与实用工具，一站式速查。</p>
            </div>
          </section>
          <section aria-label="工具资源菜单" style="margin-top:8px;">
            <h3 class="section-title title-row"><svg class="ico-mini" aria-hidden="true"><use xlink:href="#icon-menu"></use></svg>实用工具</h3>
            <div class="menu-grid">
              <div class="menu-card" data-study="periodic"><div class="menu-title title-row"><span class="badge-ico g-purple"><svg aria-hidden="true"><use xlink:href="#icon-apps"></use></svg></span>元素周期表</div><div class="menu-sub">118 个元素</div></div>
              <div class="menu-card" data-study="times"><div class="menu-title title-row"><span class="badge-ico g-orange"><svg aria-hidden="true"><use xlink:href="#icon-table"></use></svg></span>九九乘法表</div><div class="menu-sub">1-9 乘法速查</div></div>
              <div class="menu-card" data-study="geometry"><div class="menu-title title-row"><span class="badge-ico g-blue"><svg aria-hidden="true"><use xlink:href="#icon-cube"></use></svg></span>几何公式</div><div class="menu-sub">面积/体积/周长</div></div>
              <div class="menu-card" data-study="constants"><div class="menu-title title-row"><span class="badge-ico g-red"><svg aria-hidden="true"><use xlink:href="#icon-lab"></use></svg></span>物理常量</div><div class="menu-sub">c、g、Nₐ 等</div></div>
              <div class="menu-card" data-study="si"><div class="menu-title title-row"><span class="badge-ico g-cyan"><svg aria-hidden="true"><use xlink:href="#icon-list"></use></svg></span>SI 前缀表</div><div class="menu-sub">k、m、µ、n…</div></div>
              <div class="menu-card" data-goto-tab="convert"><div class="menu-title title-row"><span class="badge-ico g-green"><svg aria-hidden="true"><use xlink:href="#icon-search"></use></svg></span>单位速查</div><div class="menu-sub">直达换算</div></div>
            </div>

            <h3 class="section-title title-row"><svg class="ico-mini" aria-hidden="true"><use xlink:href="#icon-like"></use></svg>推荐</h3>
            <div class="widgets">
              <div class="widget">
                <h4 class="widget-title title-row"><svg class="ico-mini" aria-hidden="true"><use xlink:href="#icon-bulb"></use></svg>今日小贴士 <span class="badge">NEW</span></h4>
                <div class="list">
                  <div class="list-item"><span class="dot"></span><span>1 L = 1000 mL，升与毫升的千倍关系</span></div>
                  <div class="list-item"><span class="dot" style="background:#f59e0b"></span><span>1 m/s = 3.6 km/h</span></div>
                </div>
              </div>
              <div class="widget">
                <h4 class="widget-title title-row"><svg class="ico-mini" aria-hidden="true"><use xlink:href="#icon-settings"></use></svg>使用技巧</h4>
                <div class="list">
                  <div class="list-item"><span class="dot" style="background:#22c55e"></span><span>先比较单位量纲关系，决定乘或除</span></div>
                  <div class="list-item"><span class="dot" style="background:#6366f1"></span><span>常用单位可添加至收藏（即将上线）</span></div>
                </div>
              </div>
            </div>
          </section>
        </section>

        <!-- 换算（菜单 + 底部抽屉式换算器） -->
        <section class="tab-panel" id="tab-convert" data-tab="convert" hidden>
          <section aria-label="单位分类菜单">
            <div class="widgets">
              <div class="widget">
                <h3 class="widget-title">常用单位</h3>
                <div class="categories">
                  <div class="category-card" data-category="length"><div class="icon blue"><svg aria-hidden="true"><use xlink:href="#icon-ruler"></use></svg></div><div><div class="category-name">长度</div><div class="category-meta">m, cm, km…</div></div></div>
                  <div class="category-card" data-category="mass"><div class="icon green"><svg aria-hidden="true"><use xlink:href="#icon-weight"></use></svg></div><div><div class="category-name">质量</div><div class="category-meta">g, kg, t…</div></div></div>
                  <div class="category-card" data-category="time"><div class="icon orange"><svg aria-hidden="true"><use xlink:href="#icon-time"></use></svg></div><div><div class="category-name">时间</div><div class="category-meta">s, min, h…</div></div></div>
                  <div class="category-card" data-category="temperature"><div class="icon red"><svg aria-hidden="true"><use xlink:href="#icon-temperature"></use></svg></div><div><div class="category-name">温度</div><div class="category-meta">℃, ℉</div></div></div>
                  <div class="category-card" data-category="area"><div class="icon teal"><svg aria-hidden="true"><use xlink:href="#icon-square"></use></svg></div><div><div class="category-name">面积</div><div class="category-meta">cm², m²…</div></div></div>
                  <div class="category-card" data-category="volume"><div class="icon purple"><svg aria-hidden="true"><use xlink:href="#icon-bottle"></use></svg></div><div><div class="category-name">体积</div><div class="category-meta">mL, L, m³…</div></div></div>
                </div>
              </div>
              <div class="widget">
                <h3 class="widget-title">进阶与电学/力学</h3>
                <div class="categories">
                  <div class="category-card" data-category="speed"><div class="icon cyan"><svg aria-hidden="true"><use xlink:href="#icon-speed"></use></svg></div><div><div class="category-name">速度</div><div class="category-meta">m/s, km/h</div></div></div>
                  <div class="category-card" data-category="data"><div class="icon yellow"><svg aria-hidden="true"><use xlink:href="#icon-database"></use></svg></div><div><div class="category-name">数据</div><div class="category-meta">KB, MB, GB</div></div></div>
                  <div class="category-card" data-category="voltage"><div class="icon indigo"><svg aria-hidden="true"><use xlink:href="#icon-bolt"></use></svg></div><div><div class="category-name">电压</div><div class="category-meta">mV, V, kV</div></div></div>
                  <div class="category-card" data-category="current"><div class="icon green"><svg aria-hidden="true"><use xlink:href="#icon-branch"></use></svg></div><div><div class="category-name">电流</div><div class="category-meta">µA, mA, A</div></div></div>
                  <div class="category-card" data-category="resistance"><div class="icon orange"><svg aria-hidden="true"><use xlink:href="#icon-wave"></use></svg></div><div><div class="category-name">电阻</div><div class="category-meta">Ω, kΩ, MΩ</div></div></div>
                  <div class="category-card" data-category="power"><div class="icon purple"><svg aria-hidden="true"><use xlink:href="#icon-power"></use></svg></div><div><div class="category-name">功率</div><div class="category-meta">W, kW</div></div></div>
                  <div class="category-card" data-category="energy"><div class="icon teal"><svg aria-hidden="true"><use xlink:href="#icon-battery"></use></svg></div><div><div class="category-name">能量</div><div class="category-meta">J, Wh, kWh</div></div></div>
                  <div class="category-card" data-category="force"><div class="icon orange"><svg aria-hidden="true"><use xlink:href="#icon-move"></use></svg></div><div><div class="category-name">力</div><div class="category-meta">N, kN</div></div></div>
                  <div class="category-card" data-category="pressure"><div class="icon red"><svg aria-hidden="true"><use xlink:href="#icon-gauge"></use></svg></div><div><div class="category-name">压强</div><div class="category-meta">Pa, kPa, MPa, bar</div></div></div>
                </div>
              </div>
            </div>
          </section>

          <!-- 底部抽屉换算器 -->
          <div id="sheet" style="position:fixed; left:0; right:0; bottom:-100%; background:#ffffff; border-top-left-radius:20px; border-top-right-radius:20px; box-shadow: 0 -18px 40px rgba(15,23,42,0.12); padding:16px 16px calc(16px + env(safe-area-inset-bottom)); transition: bottom .25s ease; max-width: 920px; margin: 0 auto; max-height: 80vh; overflow:auto;">
            <div style="width:48px; height:5px; border-radius:5px; background:#e5e7eb; margin:0 auto 10px;"></div>
            <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;">
              <strong id="sheetTitle">快速换算</strong>
              <button id="sheetClose" class="btn" aria-label="关闭">关闭</button>
            </div>
            <div class="row" style="margin-bottom: 10px;">
              <select class="select" id="categorySelect" aria-label="选择分类">
                <option value="length">长度 Length</option>
                <option value="mass">质量 Mass</option>
                <option value="time">时间 Time</option>
                <option value="temperature">温度 Temperature</option>
                <option value="voltage">电压 Voltage</option>
                <option value="current">电流 Current</option>
                <option value="resistance">电阻 Resistance</option>
                <option value="power">功率 Power</option>
                <option value="energy">能量 Energy</option>
                <option value="force">力 Force</option>
                <option value="pressure">压强 Pressure</option>
              </select>
              <input class="number" id="inputValue" type="number" step="any" placeholder="输入数值" aria-label="输入数值" />
            </div>
            <div class="controls">
              <select class="select" id="fromUnit" aria-label="原单位"></select>
              <button class="swap-btn" id="swapBtn" aria-label="交换单位">⇆</button>
              <select class="select" id="toUnit" aria-label="目标单位"></select>
            </div>
            <div class="result" id="resultText">结果会显示在这里</div>
          </div>
        </section>

        <!-- 我的 -->
        <section class="tab-panel" id="tab-learn" data-tab="learn" hidden>
          <section class="converter">
            <div class="card">
              <h2 class="card-title">我的</h2>
              <div class="list">
                <div class="list-item"><span class="dot"></span><span>收藏的换算：暂无</span></div>
                <div class="list-item"><span class="dot" style="background:#f59e0b"></span><span>最近使用：暂无</span></div>
                <div class="list-item"><span class="dot" style="background:#22c55e"></span><span>设置（Iconfont）：在下方粘贴你的 Symbol 链接并保存</span></div>
              </div>
              <div style="margin-top:10px; display:grid; gap:8px;">
                <label for="iconfontUrl" class="muted">Iconfont Symbol 链接</label>
                <input id="iconfontUrl" class="number" placeholder="例如：https://at.alicdn.com/t/xxxx.js" />
                <div style="display:flex; gap:8px;">
                  <button class="btn primary" id="saveIconfont">保存并应用</button>
                  <button class="btn" id="resetIconfont">恢复默认</button>
                </div>
                <span id="iconfontStatus" class="muted"></span>
              </div>
              <p class="muted" style="margin-top:10px;">你可以在这里查看收藏、历史与个性化设置。</p>
            </div>
          </section>
        </section>
      </main>

      <nav class="tabbar" aria-label="底部导航">
        <div class="tabbar-inner">
          <button class="tab-btn active" data-goto="home">
            <svg class="ico" aria-hidden="true"><use xlink:href="#icon-home"></use></svg>
            学习
          </button>
          <button class="tab-btn" data-goto="convert">
            <svg class="ico" aria-hidden="true"><use xlink:href="#icon-grid"></use></svg>
            换算
          </button>
          <button class="tab-btn" data-goto="learn">
            <svg class="ico" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
            我的
          </button>
        </div>
      </nav>

      <footer class="footer">© 2025 单位换算 · 高效换算工具</footer>
    </div>

    <script>
      // Minimal demo converter logic with clear English keys (per user preference)
      const unitMaps = {
        length: {
          base: 'm',
          map: { km: 1000, m: 1, cm: 0.01, mm: 0.001 }
        },
        mass: {
          base: 'g',
          map: { t: 1_000_000, kg: 1000, g: 1, mg: 0.001 }
        },
        time: {
          base: 's',
          map: { h: 3600, min: 60, s: 1, ms: 0.001 }
        },
        temperature: {
          // handle separately
          base: 'C',
          map: { C: 'C', F: 'F' }
        },
        // Electricity (SI prefixes)
        voltage: {
          base: 'V',
          map: { kV: 1000, V: 1, mV: 0.001 }
        },
        current: {
          base: 'A',
          map: { kA: 1000, A: 1, mA: 0.001, uA: 0.000001 }
        },
        resistance: {
          base: 'ohm',
          map: { Mohm: 1_000_000, kohm: 1000, ohm: 1 }
        },
        power: {
          base: 'W',
          map: { kW: 1000, W: 1 }
        },
        energy: {
          // include Joule and Wh families (1 Wh = 3600 J)
          base: 'J',
          map: { kJ: 1000, J: 1, Wh: 3600, kWh: 3_600_000 }
        },
        // Mechanics
        force: {
          base: 'N',
          map: { kN: 1000, N: 1 }
        },
        pressure: {
          base: 'Pa',
          map: { MPa: 1_000_000, kPa: 1000, Pa: 1, bar: 100000 }
        }
      };

      const categorySelect = document.getElementById('categorySelect');
      const inputValue = document.getElementById('inputValue');
      const fromUnit = document.getElementById('fromUnit');
      const toUnit = document.getElementById('toUnit');
      const resultText = document.getElementById('resultText');
      const swapBtn = document.getElementById('swapBtn');

      function populateUnits(category) {
        const { map } = unitMaps[category];
        fromUnit.innerHTML = '';
        toUnit.innerHTML = '';
        Object.keys(map).forEach(u => {
          const opt1 = document.createElement('option');
          opt1.value = u; opt1.textContent = u;
          const opt2 = document.createElement('option');
          opt2.value = u; opt2.textContent = u;
          fromUnit.appendChild(opt1);
          toUnit.appendChild(opt2);
        });
        if (category === 'length') { fromUnit.value = 'm'; toUnit.value = 'cm'; }
        if (category === 'mass') { fromUnit.value = 'kg'; toUnit.value = 'g'; }
        if (category === 'time') { fromUnit.value = 'min'; toUnit.value = 's'; }
        if (category === 'temperature') { fromUnit.value = 'C'; toUnit.value = 'F'; }
        if (category === 'voltage') { fromUnit.value = 'V'; toUnit.value = 'mV'; }
        if (category === 'current') { fromUnit.value = 'A'; toUnit.value = 'mA'; }
        if (category === 'resistance') { fromUnit.value = 'ohm'; toUnit.value = 'kohm'; }
        if (category === 'power') { fromUnit.value = 'W'; toUnit.value = 'kW'; }
        if (category === 'energy') { fromUnit.value = 'J'; toUnit.value = 'Wh'; }
        if (category === 'force') { fromUnit.value = 'N'; toUnit.value = 'kN'; }
        if (category === 'pressure') { fromUnit.value = 'Pa'; toUnit.value = 'kPa'; }
        compute();
      }

      function convertValue(category, value, from, to) {
        if (!value && value !== 0) return '';
        const num = Number(value);
        if (!Number.isFinite(num)) return '';

        if (category === 'temperature') {
          if (from === to) return num;
          if (from === 'C' && to === 'F') return num * 9/5 + 32;
          if (from === 'F' && to === 'C') return (num - 32) * 5/9;
          return '';
        }

        const { base, map } = unitMaps[category];
        const toBase = num * map[from];
        const toTarget = toBase / map[to];
        return toTarget;
      }

      function compute() {
        const category = categorySelect.value;
        const val = inputValue.value;
        const from = fromUnit.value;
        const to = toUnit.value;
        const result = convertValue(category, val, from, to);
        if (result === '') {
          resultText.textContent = '请输入数值进行换算';
        } else {
          const pretty = Number(result).toLocaleString(undefined, { maximumFractionDigits: 8 });
          resultText.textContent = `${val || 0} ${from} = ${pretty} ${to}`;
        }
      }

      categorySelect.addEventListener('change', () => populateUnits(categorySelect.value));
      inputValue.addEventListener('input', compute);
      fromUnit.addEventListener('change', compute);
      toUnit.addEventListener('change', compute);
      swapBtn.addEventListener('click', () => {
        const f = fromUnit.value; fromUnit.value = toUnit.value; toUnit.value = f; compute();
      });

      // Tabs logic
      const tabButtons = Array.from(document.querySelectorAll('.tab-btn'));
      const tabPanels = Array.from(document.querySelectorAll('.tab-panel'));
      const sheet = document.getElementById('sheet');
      const sheetClose = document.getElementById('sheetClose');
      const sheetTitle = document.getElementById('sheetTitle');
      // Dynamic iconfont loader
      const ICONFONT_KEY = 'iconfont_symbol_url';
      const defaultIconfont = document.getElementById('iconfont-fallback').getAttribute('src');
      function ensureIconfontLoaded() {
        const saved = localStorage.getItem(ICONFONT_KEY);
        if (saved && saved !== defaultIconfont) {
          const exist = document.querySelector('script[data-dynamic-iconfont="true"]');
          if (!exist) {
            const s = document.createElement('script');
            s.src = saved;
            s.setAttribute('data-dynamic-iconfont', 'true');
            document.head.appendChild(s);
          }
        }
      }
      ensureIconfontLoaded();
      // Study menu actions
      document.querySelectorAll('[data-goto-tab]')?.forEach(card => {
        card.addEventListener('click', () => switchTab(card.getAttribute('data-goto-tab')));
      });
      document.querySelectorAll('[data-study]')?.forEach(card => {
        const key = card.getAttribute('data-study');
        card.addEventListener('click', () => {
          if (key === 'times') {
            alert('九九乘法表即将打开（可放在单独页面或弹层）。');
          } else if (key === 'periodic') {
            alert('元素周期表即将打开（可放在单独页面或弹层）。');
          } else {
            alert('该学习资源稍后提供，敬请期待～');
          }
        });
      });
      function switchTab(name) {
        tabButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.goto === name));
        tabPanels.forEach(panel => {
          if (panel.dataset.tab === name) panel.removeAttribute('hidden');
          else panel.setAttribute('hidden', '');
        });
        if (name === 'convert') {
          // open menu view; sheet will open on category click
        }
      }
      tabButtons.forEach(btn => btn.addEventListener('click', () => switchTab(btn.dataset.goto)));

      // Category opens bottom sheet
      function openSheetFor(category) {
        if (unitMaps[category]) {
          categorySelect.value = category;
          populateUnits(category);
        }
        if (sheet) { sheet.style.bottom = '0'; }
        if (sheetTitle) {
          const names = {
            length: '长度 Length', mass: '质量 Mass', time: '时间 Time', temperature: '温度 Temperature',
            voltage: '电压 Voltage', current: '电流 Current', resistance: '电阻 Resistance', power: '功率 Power',
            energy: '能量 Energy', force: '力 Force', pressure: '压强 Pressure', area: '面积 Area', volume: '体积 Volume',
            speed: '速度 Speed', data: '数据 Data'
          };
          sheetTitle.textContent = names[category] || '快速换算';
        }
        setTimeout(() => inputValue && inputValue.focus(), 100);
      }
      document.querySelectorAll('#tab-convert .category-card').forEach(card => {
        card.addEventListener('click', () => openSheetFor(card.getAttribute('data-category')));
      });
      if (sheetClose) sheetClose.addEventListener('click', () => { sheet.style.bottom = '-100%'; });

      // Header removed; primary jump not needed

      // init
      switchTab('home');
      populateUnits(categorySelect.value);

      // Settings events
      const iconfontUrlInput = document.getElementById('iconfontUrl');
      const saveIconfontBtn = document.getElementById('saveIconfont');
      const resetIconfontBtn = document.getElementById('resetIconfont');
      const iconfontStatus = document.getElementById('iconfontStatus');
      if (iconfontUrlInput) {
        iconfontUrlInput.value = localStorage.getItem(ICONFONT_KEY) || '';
      }
      function setStatus(msg, ok) {
        if (!iconfontStatus) return;
        iconfontStatus.textContent = msg;
        iconfontStatus.style.color = ok ? '#16a34a' : '#6b7280';
      }
      if (saveIconfontBtn) {
        saveIconfontBtn.addEventListener('click', () => {
          const url = (iconfontUrlInput.value || '').trim();
          if (!/^https?:\/\/.+\.js$/i.test(url)) { setStatus('请输入有效的 .js 链接', false); return; }
          localStorage.setItem(ICONFONT_KEY, url);
          setStatus('已保存，正在应用…', true);
          location.reload();
        });
      }
      if (resetIconfontBtn) {
        resetIconfontBtn.addEventListener('click', () => {
          localStorage.removeItem(ICONFONT_KEY);
          setStatus('已恢复默认图标库，正在应用…', true);
          location.reload();
        });
      }
    </script>
  </body>
</html>


